<template>
	<wd-navbar title="省份管理" :bordered="false" placeholder safeAreaInsetTop right-text="添加" left-arrow
		@click-left="handleBack" @click-right="clickHeaderRight">
	</wd-navbar>
	<view class="address-list">
		<view class="address-list-li" v-for="(a,index) in data.list">
			<text class="address-name">{{a.name}}</text>
			<text class="address-code">{{a.code}}</text>
		</view>
	</view>
</template>

<script setup>
	import overallRequest from "@/utool/http/http.js"
	import {
		reactive,
		ref
	} from 'vue'

	import {
		onLoad,
		onReachBottom,
		onReady
	} from "@dcloudio/uni-app"
	const data = reactive({
		limit: null,
		page: null,
		pages: null,
		list: []
	})
	// 获取省份数据
	function GetProvincesList() {
		
		let parent = 156 
		let page = data.page || 1
		
		let url =`/address/provincesList?parent=${parent}&page=${page}`
		overallRequest(url).then(res => {
			let {
				limit,
				page,
				pages,
				list
			} = res.data
			data.page = page
			data.pages = pages
			data.limit = limit
			data.list.push(...list)
		}).catch(err => {
			console.log(err);
		})
	}
	
	onReachBottom(()=>{
		let page = data.page
		let pages = data.pages
		if (page >= pages) {
			return
		} else {
			data.page++
			GetProvincesList()
		}
	})
	
	// 获取城市数据
	function GetCitiesList() {

	}
	// 获取区县数据
	function GetDistrictsList() {

	}
	// 点击返回
	function handleBack() {
		uni.navigateBack({})
	}

	// 点击删除
	function clickDelete(item, index) {

	}

	onReady(() => {
		GetProvincesList()
	})
</script>

<style>
	.address-list-li {
		display: flex;
		flex-direction: column;
		padding: 25rpx 25rpx;
		border-bottom: 1rpx solid #c3c3c344;
	}

	.address-list-li:active {
		background-color: #c3c3c344;
	}

	.address-name {
		font-size: 30rpx;
		margin-bottom: 8rpx;

	}

	.address-code {
		font-size: 24rpx;
		color: gray;
	}
</style>